//  新闻详情页
<template>
  <el-container>
    <el-backtop :visibility-height="60">
      <i class="el-icon-caret-top"></i>
    </el-backtop>
    <div id="box">
      <div id="logo">
        <img src="../assets/logo2.png" />
        <span>瞪羚科技</span>
      </div>
      <div id="menu">
        <el-menu :default-active="activeIndex"
                 class="el-menu-demo"
                 mode="horizontal"
                 background-color="#fff"
                 text-color="#000"
                 active-text-color="#0080ff">
          <el-menu-item @click="main_btn"
                        index="/main">首页</el-menu-item>
          <el-submenu index="/jieshao">
            <template slot="title">产品介绍</template>
            <el-menu-item v-for="(li,index) in project"
                          :key="index"
                          @click="jieshao_btn(li.id)">{{li.title}}</el-menu-item>
          </el-submenu>
          <el-menu-item @click="news_btn"
                        index="/news">瞪羚新闻</el-menu-item>
          <el-menu-item @click="recruit_btn"
                        index="/recruit">加入我们</el-menu-item>
          <el-menu-item>
            <el-button type="text">
              <img src="../assets/menu2.png" />
            </el-button>
          </el-menu-item>
        </el-menu>
      </div>
    </div>
    <div class="main">
      <el-container>
        <el-main>
          <div class="animate__animated animate__fadeInUp">
            <div class="mainbox">
              <div class="mainhead"
                   v-html="nowData.title"></div>
              <div class="datetime"
                   v-html="nowData.releaseTime"></div>
              <div class="main1"
                   v-html="nowData.content"></div>
            </div>
            <div class="mainfoot">
              <div class="buttonleft">
                <el-button type="primary"
                           v-bind:disabled="disablednext"
                           @click="toBeforeNew">{{next}}</el-button>
              </div>
              <div class="buttonright">
                <el-button type="primary"
                           id="to_btn"
                           v-bind:disabled="disabledInput"
                           @click="toNextNew">{{nextTitle}}</el-button>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </div>
    <el-footer>
      <h1>广西瞪羚科技有限公司</h1>
      <span>联系电话：0771-5615159</span>
      <br />
      <span>地址：南宁市青秀区佛子岭路33号网易联合创新中心28栋一楼</span>
    </el-footer>
    <div id="down">
      <span>Copyright©2019广西瞪羚科技有限公司 All Right Reserved</span>
      <span>南宁网安备 33011002013032号</span>
      <span>浙ICP备13032182号-1</span>
    </div>
  </el-container>
</template>
<script>
// import axios from 'axios'
export default {
  name: "jsxq",
  components: {},
  data () {
    return {
      activeIndex: "/jieshao",
      project: [],
      nowData: {},
      beforeData: {},
      nextData: {},
      nextTitle: "",
      disabledInput: false,
      disablednext: false,
      next: "",
    };
  },
  mounted () {
    var that = this;
    this.$axios
      .get("http://dl.sword.ink:2334/project/" + that.$route.query.id)
      .then((res) => {
        that.nowData = JSON.parse(JSON.stringify(res.data.data[0]));
        this.next = "上一篇";
        if (res.data.data.length == 1) {
          that.nextTitle = "没有了";
          that.disabledInput = true;
        } else {
          that.nextTitle = "下一篇";
        }
        if (that.$route.query.id == 1) {
          that.disablednext = true;
        }
        this.nextid = res.data.data[1].id;
      });
    this.getproject();
  },
  methods: {
    getproject () {
      var that = this;
      this.$axios.get(`${this.baseURL}` + "/project/").then((res) => {
        that.project = res.data.data;
      });
    },
    main_btn () {
      this.$router.push("/main");
    },
    jieshao_btn (id) {
      this.$router.push({
        name: "jsxq",
        query: {
          id: id,
        },
      });
      location.reload();
    },
    news_btn () {
      this.$router.push("/news");
    },
    recruit_btn () {
      this.$router.push("/recruit");
    },
    toBeforeNew () {
      //获取上一条数据

      this.$axios
        .get("http://dl.sword.ink:2334/projectc/" + this.nowData.id + "&-1")
        .then((res) => {
          this.nextid = res.data.data[0].id;
          this.$router.push({
            name: "jsxq",
            query: {
              id: this.nextid,
            },
          });
          location.reload();
          this.nextTitle = "下一篇";
          this.beforeData = JSON.parse(JSON.stringify(res.data.data[0]));
          this.nowData = this.beforeData;
          this.disabledInput = false;
          if (res.data.data.length == 1) {
            this.disablednext = true;
          }
        });
    },
    toNextNew () {
      this.$axios
        .get("http://dl.sword.ink:2334/projectc/" + this.nowData.id + "&1")
        .then((res) => {
          this.nextData = JSON.parse(JSON.stringify(res.data.data[0]));
          this.nowData = this.nextData;
          this.$router.push({
            name: "jsxq",
            query: {
              id: this.nextid,
            },
          });
          location.reload();
          this.disablednext = false;
          if (res.data.data.length == 1) {
            this.nextTitle = "没有了";
            this.disabledInput = true;
          } else {
            this.nextTitle = "下一篇";
          }
        });
    },
  },
};
</script>
<style scoped>
#box {
  min-width: 700px;
  position: fixed;
  top: 0;
  left: 8%;
  right: 8%;
  background-color: #fff;
  color: #000;
  box-shadow: 13px 12px 70px 0px rgba(65, 77, 128, 0.22);
  z-index: 999;
}
#logo {
  display: flex;
  align-items: center;
  padding-left: 37px;
  float: left;
}
#logo img {
  padding-top: 16px;
}
#logo span {
  margin-left: 25px;
  margin-top: 18px;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
}
#logo {
  display: flex;
  align-items: center;
  padding-left: 37px;
  float: left;
}
.el-menu-item {
  margin: 0 8px !important;
}
.el-menu.el-menu--horizontal {
  border-bottom: 0 !important;
}
#menu {
  float: right;
  padding-right: 3%;
}
.el-button img {
  width: 28px;
}
.main {
  color: #333;
}
.el-footer {
  min-height: 248px !important;
  color: #fff;
  background-color: #011436;
  padding-left: 15%;
}
.el-footer h1 {
  font-size: 22px;
  padding-top: 65px;
  color: #fff;
  padding-bottom: 30px;
}
.el-footer span {
  font-size: 15px;
  line-height: 41px;
}
#down {
  text-align: center;
  background-color: black;
  padding: 26px 0;
  color: #fff;
  width: 100%;
}
#down span {
  margin-left: 60px;
  font-size: 14px;
}
/* 主体部分 */
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 20px;
  overflow-y: hidden;
  overflow-x: hidden;
}
.animate__animated.animate__fadeInUp {
  --animate-duration: 0.5s;
}
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.5s;
}
.mainbox {
  background-color: #ffffff;
  margin-top: 60px;
  margin-left: 10%;
  margin-right: 10%;
  padding-left: 4%;
  padding-right: 4%;
  line-height: 30px;
  /* background-color: pink; */
  /* margin-left: 12%;
  margin-right: 12%; */
}
.mainhead {
  padding-top: 4%;
  font-size: 21px;
  line-height: 24px;
  width: auto;
  text-align: center;
}
.datetime {
  margin-top: 2%;
  margin-bottom: 2%;
}
.main1 {
  text-align: left;
}
.foot {
  padding: 0;
  margin: 0;
}
.buttonleft {
  float: left;
  margin-left: 15%;
  margin-top: 2%;
  margin-right: 5%;
  margin-bottom: 3%;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.buttonright {
  float: right;
  margin-right: 15%;
  margin-top: 2%;
  margin-left: 5%;
  margin-bottom: 3%;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.el-button {
  font-size: 2vh;
}
#next_btn {
  margin: 0;
}
</style>
